
import { onMounted, onUnmounted, ref } from 'vue'

export function useEventListener(target, event, callback) {
  // 如果你想的话，
  // 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.removeEventListener(event, callback))
}

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  useEventListener(window, 'mousemove', (event) => {
    x.value = event.pageX
    y.value = event.pageY
  })

  return { x, y }
}

// TODO: Add 修改颜色
export const nowColor = ref('#FF66FF')
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
export function alterColor(color = '') {
  const nowNum = colors[Math.ceil(Math.random() * colors.length) - 1]
  // console.log(Math.ceil(Math.random() * colors.length), nowNum);
  nowColor.value = nowNum
}